<template>
  <div class="container">
    <ActionBar @input-change="handleInputChange" @search-click="getOperationLogList" />
    <Table :tableData="operationLogList" :loading="tableLoading" />
    <el-pagination
      class="pagination"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @size-change="handlePageSizeChange"
      @current-change="handlePageNumChange"
    ></el-pagination>
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Table from './components/Table'
import OperationLogService from '../../../service/operation_log'
import { loadingType } from '../../../common/js/constant'

export default {
  data() {
    return {
      keyword: '',
      operationLogList: []
    }
  },
  methods: {
    // 获取操作日志列表
    getOperationLogList() {
      const { keyword, pageNum, pageSize } = this
      const result = OperationLogService.getOperationLogListByKeyword(
        keyword,
        pageNum,
        pageSize
      ).then(res => {
        const { pageNum, total, list } = res.data
        this.pageNum = pageNum
        this.total = total
        this.operationLogList = list
      })
      this.loadingAspect(result, loadingType.TABLE)
    },
    // 处理input改变事件
    handleInputChange(value) {
      this.keyword = value
    },
    // 处理pageSize改变事件
    handlePageSizeChange(value) {
      this.pageSize = value
      this.getOperationLogList()
    },
    // 处理pageNum改变事件
    handlePageNumChange(value) {
      this.pageNum = value
      this.getOperationLogList()
    }
  },
  mounted() {
    this.getOperationLogList()
  },
  components: {
    ActionBar,
    Table
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  padding 20px
  box-sizing border-box
  .pagination
    margin-top 20px
    text-align right
</style>
